import { Button, FormRule, Icon, Image, Popup, PrimaryTableCol } from 'tdesign-vue-next';

/**
 * 搜索表单项
 */
export const getSearchParams = () => [
  {
    label: '药材名称',
    key: 'name',
    hide: false,
  },
];

/**
 * 表格列
 */
export const getColumns = (): PrimaryTableCol[] => [
  {
    title: '药材名称',
    ellipsis: true,
    align: 'center',
    colKey: 'name',
  },
  {
    title: '英文名',
    ellipsis: true,
    align: 'center',
    colKey: 'nameEn',
  },
  {
    title: '封面图',
    align: 'center',
    colKey: 'cover',
    width: 100,
    cell: (h, { row }) =>
      h(Image, { src: row.cover, fit: 'contain', style: 'width: 100px; height: 100px;margin: 0 auto' }),
  },
  {
    title: '产地',
    ellipsis: true,
    align: 'center',
    colKey: 'origin',
  },
  {
    title: '简介',
    align: 'center',
    colKey: 'introduction',
    cell: (h, { row }) =>
      h(Popup, { content: row.introduction, destroyOnClose: true, overlayStyle: { width: '300px' } }, () => {
        return h(Button, {
          shape: 'circle',
          variant: 'base',
          icon: () => {
            return h(Icon, { name: 'browse' });
          },
        });
      }),
  },
];

/**
 * 表单校验规则
 */
export const getRules = (): Record<string, FormRule[]> => ({
  name: [{ required: true, message: '请输入药材名称', type: 'error', trigger: 'blur' }],
});
